<template>
  <page class="demo">
    <page-header>
      <x-header :left-options="{backText: ''}">set empty back text</x-header>
    </page-header>
    <page-content :scroll="true" @refresh="refresh" @infinite="infinite">
      <!-- <div class="box2">
        <p class="item" v-for="i in value" :key="i">placeholder {{i}}</p>
      </div> -->
      <card>
        <card-header>
          <span slot="title"></span>
        </card-header>
        <card-content>
          <div class="grid">
            <div class="grid-item h-full" v-for="item in list" :key="item.id">
              <label class="label">Grid item Lable：</label>
              <p class="vlaue">{{'Grid item value Grid item value Grid item value Grid item value Grid item value Grid item value' + item}}</p>
            </div>
          </div>
        </card-content>
      </card>
    </page-content>
  </page>
</template>

<script>
import { XHeader, Scroller } from 'vux'
export default {
  name: 'Demo',
  components: {
    XHeader,
    Scroller
  },
  data () {
    return {
      value: 100,
      list: 20
    }
  },
  methods: {
    async refresh (done) {
      console.log('=====refresh======')
      setTimeout(() => {
        this.value = 100
      }, 1000)
    },
    async infinite (done) {
      console.log('=====infinite======')
      setTimeout(() => {
        this.value += 100
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
  .item {
    height: 36px;
    line-height: 36px;
    padding: 5px 15px;
    background: #fff;
    &:nth-child(2n) {
      background: #eee;
    }
  }
</style>
